<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import { vw, vh } from '@/utils/viewSize'
import type { propType } from './type'
import * as echarts from 'echarts'
import TextStyleMixin from 'echarts/types/src/model/mixin/textStyle.js'
const props = defineProps<propType>()
const chart = ref()
const initCharts = () => {
  var myChart = echarts.init(chart.value)

  myChart.setOption({
    color: (props.color as string[]) || ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    title: {
      // text: props.title || '雷达图',
      textStyle: {
        fontSize: vw(12)
      }
    },
    textStyle: {
      color: '#fff',
      fontSize: vw(8)
    },
    //图例
    legend: {
      origin: 'horizontal',
      width: vw(540),
      height: vh(30),
      itemWidth: vw(10),
      itemHeight: vw(10),
      textStyle: {
        color: '#fff',
        fontSize: vw(8)
      },
      lineStyle: {
        type: 'dashed',
        width: vw(2)
      }
    },
    grid: {
      top: '20%'
      // left: '5%',
      // right: '5%'
    },
    radar: [
      {
        indicator: props.indicator || [
          {
            text: '数据1',
            color: '#fff'
          },
          { text: '数据2', color: '#fff' },
          { text: '数据3', color: '#fff' },
          { text: '数据4', color: '#fff' },
          { text: '数据5', color: '#fff' },
          { text: '数据6', color: '#fff' }
        ],
        nameGap: vw(3),
        splitArea: {
          areaStyle: {
            color: ['#2e85e7', '#3277c5', '#2a5ddf', '#2e3e8f'],
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 10
          }
        },
        axisLine: {
          lineStyle: {
            color: '#163794'
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#163794'
          }
        },

        center: ['50%', '50%'],
        radius: '70%',
        axisName: {
          color: '#fff',

          borderRadius: 1,
          padding: [3, 5]
        }
      }
    ],
    series: [
      {
        type: 'radar',
        // radarIndex: 1,
        symbolSize: vw(5), // 节点的大小
        lineStyle: {
          width: vw(2)
        },
        emphasis: {
          // color: 各异,
          lineStyle: {
            width: vw(3)
          }
        },
        data: props.data || [
          {
            value: [120, 148, 60, 100, 99, 70],
            name: 'Data A'
          },
          {
            value: [120, 118, 130, 100, 99, 70],
            name: 'Data C',
            symbol: 'rect',
            symbolSize: vw(1),
            lineStyle: {
              type: 'dashed',
              width: vw(2)
            },
            label: {
              // show: true,
              formatter: function (params: any) {
                return params.value
              }
            }
          },
          {
            value: [100, 93, 50, 90, 70, 60],
            name: 'Data D',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(255, 145, 124, 0.1)',
                  offset: 0
                },
                {
                  color: 'rgb(0, 195, 255)',
                  offset: 1
                }
              ])
            }
          }
        ]
      }
    ]
  })

  //自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  initCharts()
})
</script>
<template>
  <div class="radar" ref="chart"></div>
</template>
<style scoped>
.radar {
  width: 100%;
  height: 100%;
  /* color: #2e85e7;
  color: #3277c5;
  color: #2a5ddf;
  color: #2e3e8f; */
}
</style>
